<template>
	<div class="mask-modal" v-if="showManghe" @tap="close">
		<div v-show="animateShow">
			<image src="../../../static/img/manghe/mangheBox.png" mode="aspectFill" class="box-img"
				:class="[openAnimate ? 'animate__bounceOut' : 'pulse-one']" v-show="!isOpen"></image>
			<image src="../../../static/img/manghe/openBox.png" mode="aspectFill" class="box-img animate-bounceIn"
				v-show="isOpen == true" style="transform: scale(1.3);"></image>
		</div>
		<div v-if="!animateShow">
			<div class="animate-box" v-if="productDetail">
				<image class="mask-image" src="@/static/img/liyangbeijing.png" mode="aspectFill" style="z-index: -1;">
				</image>
				<div class="mask-box">
					<div class="left"></div>
					<div class="right"></div>
					<image :src="productDetail.spu.cover" mode="aspectFill"
						style="width: 70.13vw;height: 70.13vw;border-radius: 6.4vw;display: block;"></image>
					<div class="num-box">
						<image src="../../../static/img/num.png" mode="aspectFill" class="num-img"></image>
						<span
							class="num-text">{{ Number(productDetail.collection.nftItemId) + Number(1) }}/{{ productDetail.spu.stock }}</span>
					</div>
					<div class="maskInfo-box">
						<div style="display: flex;">
							<span class="line"></span>
							<div class="info-box">
								<span class="info-title">{{ productDetail.spu.spuTitle }}</span>
								<div style="display: flex;flex-wrap: wrap;">
									<div class="info-border" v-for="item1 in productDetail.spu.tags.split(',')">
										{{ item1 }}</div>
								</div>
							</div>
						</div>
						<div class="dashed"></div>
						<div class="get-btn" @tap="toDetail(productDetail.spu.spuId)">
							立即查看
						</div>
						<div class="back-text">返回</div>
					</div>
				</div>
			</div>
		</div>
		<div style="flex: 1;display: flex;align-items: flex-end;" v-show="!isOpen">
			<div class="mask-bottom">
				<span class="open-button btn" @tap.stop="nowOpen">即刻开启</span>
				<span class="cancel-button btn" @tap.stop="close">取消</span>
			</div>
		</div>
	</div>
</template>

<script>
	import productModal from '@/subPackA/components/product-modal/product-modal';
	export default {
		data() {
			return {
				showManghe: false,
				isOpen: false,
				animateShow: true,
				openAnimate: false,
				item: {},
				productDetail: {}
			}
		},
		methods: {
			open(obj) {
				this.showManghe = true;
				if (obj) {
					this.init(obj);
				}
			},
			async nowOpen() {
				this.openAnimate = true;
				
				setTimeout(() => {
					this.isOpen = true;
				}, 1200)
				
				setTimeout(() => {
					this.animateShow = false;
				}, 2500)
				
				await this.$u.api.onOpenBindBox({}, this.item.collectionId).then(res => {
					this.productDetail = res;
					
					// uni.$emit('isOpen',res.collection.collectionId)
				})
				await this.$emit('open',this.item);
				
				
			},
			openAnimate() {
				this.openAnimate = true;
			},
			close() {
				this.showManghe = false;
				this.isOpen = false;
				this.animateShow = true;
				this.openAnimate = false;
			},
			init(that = this) {
				this.item = that.item
			},
			toDetail(id) {
				this.$ma.route.detail({
					spuId: id,
					detailType: 'my',
					collectionId: this.productDetail.collection.collectionId
				})
			}
		},
		mounted() {}
	}
</script>

<style lang="scss">
	.back-text {
		margin-top: 3.2vw;
		color: #555555;
		font-size: 3.2vw;
		font-weight: 300;
		text-align: center;
	}

	.pulse-one {
		animation: pulse 1.5s ease-in-out infinite;
		display: block;
	}

	@keyframes pulse {

		from {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}

		50% {
			-webkit-transform: scale3d(1.08, 1.08, 1.08);
			transform: scale3d(1.08, 1.08, 1.08);
		}

		to {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}

	}

	@-webkit-keyframes bounceOut {
		20% {
			-webkit-transform: scale3d(0.9, 0.9, 0.9);
			transform: scale3d(0.9, 0.9, 0.9);
		}

		50%,
		55% {
			opacity: 1;
			-webkit-transform: scale3d(1.1, 1.1, 1.1);
			transform: scale3d(1.1, 1.1, 1.1);
		}

		to {
			opacity: 0;
			-webkit-transform: scale3d(0.3, 0.3, 0.3);
			transform: scale3d(0.3, 0.3, 0.3);
		}
	}

	@keyframes bounceOut {
		20% {
			-webkit-transform: scale3d(0.9, 0.9, 0.9);
			transform: scale3d(0.9, 0.9, 0.9);
		}

		50%,
		55% {
			opacity: 1;
			-webkit-transform: scale3d(1.1, 1.1, 1.1);
			transform: scale3d(1.1, 1.1, 1.1);
		}

		to {
			opacity: 0;
			-webkit-transform: scale3d(0.3, 0.3, 0.3);
			transform: scale3d(0.3, 0.3, 0.3);
		}
	}

	.animate__bounceOut {
		animation: bounceOut 1.2s ease-in-out;
		// animation-duration: calc(1s * 0.75);
		// animation-duration: calc(var(--animate-duration) * 0.75);
		// animation-name: bounceOut;
	}

	@keyframes bounceIn {

		from,
		20%,
		40%,
		60%,
		80%,
		to {
			// -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
			// animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		}

		0% {
			opacity: 0;
			transform: scale(0.3);
		}



		to {
			opacity: 1;
			transform: scale(1.3);
		}
	}

	.animate-bounceIn {
		animation: bounceIn 0.9s ease-in-out;
	}

	@keyframes bounceBiug {
		0% {
			transform: scale(0);
		}

		100% {
			transform: scale(1.3);
		}
	}

	.animate-box {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 100%;
		height: 100vh;
	}

	.mask-box {
		// animation: bounceBiug 2s ease-in-out;
		padding: 6.4vw;
		border-radius: 6.4vw;
		background-color: #1b1b1b;
		position: relative;
		margin: 0 6.4vw;

		// .left{
		// 	width: 4.27vw;
		// 	height: 4.27vw;
		// 	border-radius: 50%;
		// 	background-color: #000;
		// 	position: absolute;
		// 	left: -2.13vw;
		// 	top: 96.7vw;
		// }

		.right {
			width: 4.27vw;
			height: 4.27vw;
			border-radius: 50%;
			background-color: #1b1b1b;
			position: absolute;
		}

		.num-box {
			display: inline-flex;
			align-items: center;
			background-color: #323232;
			border-radius: 1.07vw;
			position: absolute;
			left: 10.67vw;
			top: 68vw;

			.num {
				padding: 0vw 1.07vw 0 1.07vw;
				background: linear-gradient(270deg, #FFCE80 0%, #A972FF 100%);
				border-radius: 1.07vw;
				font-size: 3.47vw;
				font-weight: blod;
			}

			.num-text {
				font-size: 2.67vw;
				font-weight: 300;
				color: #FFCE80;
				padding: 0.27vw 1.07vw;
			}
		}

		.maskInfo-box {
			margin-top: 4.27vw;
			background-color: #1b1b1b;
			display: flex;
			flex-direction: column;

			.line {
				width: 1.07vw;
				height: 11.2vw;
				display: block;
				background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
				margin-right: 2.13vw;
				border-radius: 12.8vw;
			}

			.info-title {
				font-size: 4.27vw;
				font-weight: 500;
				color: #fff;
				width: 64.8vw;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.info-box {
				display: flex;
				flex-direction: column;
			}

			.info-border {
				margin-top: 1.07vw;
				border: 1px solid #A972FF;
				padding: 0.27vw 1.07vw;
				font-size: 2.67vw;
				font-weight: 300;
				color: #A972FF;
				border-radius: 1.07vw;
				margin-right: 1.07vw;
			}

			.dashed {
				margin-top: 6.4vw;
				background: linear-gradient(to left,
						transparent 0%,
						transparent 50%,
						#000 50%,
						#000 100%);
				background-size: 18px 1px;
				background-repeat: repeat-x;
				width: 100%;
				height: 1px;
			}

			.get-btn {
				margin-top: 6.4vw;
				width: 100%;
				line-height: 12.8vw;
				box-shadow: 0vw 3vw 5vw rgba(71, 12, 114, 0.4800);
				background: linear-gradient(90deg, #FFCE80 0%, #A972FF 100%);
				text-align: center;
				border-radius: 6.4vw;
				font-size: 3.73vw;
				font-weight: 500;
				color: #000000;
			}
		}
	}

	.mask-image {
		will-change: transform;
		position: fixed;
		top: 0;
		left: -50%;
		height: 100%;
		width: 200%;
		z-index: 1000;
		background: transparent;
		animation: box-ani 40s infinite linear;
	}

	@keyframes box-ani {
		from {
			transform: rotate(0)
		}

		to {
			transform: rotate(360deg)
		}
	}

	.mask-modal {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 1111;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;

		.box-img {
			width: 100vw;
			height: 80vw;
			position: absolute;
			top: 44.8vw;
			right: 3.2vw;
		}

		.mask-bottom {
			display: flex;
			flex-direction: column;
			width: 100%;
			padding: 8.53vw 5.33vw 2.13vw 5.33vw;
			padding-bottom: calc(2.13vw + constant(safe-area-inset-bottom));
			padding-bottom: calc(2.13vw + env(safe-area-inset-bottom));
			background-color: #1b1b1b;
			border-radius: 6.4vw 6.4vw 0 0;

			.btn {
				width: 100%;
				line-height: 12.8vw;
				text-align: center;
				font-size: 3.73vw;
				border-radius: 6.4vw;
			}

			.open-button {
				color: #000000;
				font-weight: 500;
				background: linear-gradient(90deg, #FFCE80 0%, #A972FF 100%);
			}

			.cancel-button {
				margin-top: 2.67vw;
				color: #555555;
				font-weight: 300;
				background-color: #000000;
			}
		}
	}
</style>
